<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改用户</title>
    <script type="text/javascript" th:src="@{/asserts/js/jQuery-3.6.0.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/reset.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/global.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/web.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/k15.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/ucCommon.css}"/>
</head>
<body>
<header th:replace="~{commons/tag::headerBar}"></header>

<div id="container" class="form">

    <div class="title" >修改表单</div>
    <form id="editForm"  th:action="@{/user/editUser}" method="post" th:object="${user}">
        <input type="hidden"  th:value="*{id}" name="id">
        <div class="input-container ic1">
            <label class="input1">用户名</label>
            <input class="input" type="text" name="username" id="u-account-reg" placeholder="请输入用户名" required th:value="${user.username}">
            <span class="msg1" id="message1"></span>
        </div>
        <div class="input-container ic1">
            <label class="input1">密码</label>
            <input class="input" type="text" name="password" id="u-password-reg" placeholder="请输入密码" required th:value="*{password}">
            <span class="msg1" id="message2"></span>
        </div>
        <div class="input-container ic1">
            <label class="input1">电话</label>
            <input class="input" type="text"  name="cellphone" id="u-cellphone-reg" placeholder="请输入密码" required th:value="*{cellphone}">
            <span class="msg1" id="message3"></span>
        </div>
        <div class="input-container ic1">
            <label class="input1">邮箱</label>
            <input class="input" type="text" name="email" id="u-checkemail-reg" placeholder="请输入邮箱" required th:value="*{email}">
            <span class="msg1" id="message4"></span>
        </div>
        <div class="input-container ic1">
            <input type="button" value="确 定" class="e-login-btn" onclick="editSubmit()"
                   style="background-color: rgb(44,192,242);width: 180px;margin-left: 100px;cursor: pointer;" />
        </div>
    </form>

</div>

<footer th:replace="~{commons/tag::footBar}"></footer>
</body>
<script>
    function editSubmit(){
        if(checkUser() && checkPassword()&&checkemail()&&checkCellPhone() ) {
            $("#editForm").submit();
        } else {
            return false;
        }
    }

    function checkUser() {
        let user = document.getElementById("u-account-reg");
        let regs = /^[a-zA-Z0-9\u4e00-\u9fa5_]{3,18}$/;
        let message = document.getElementById("message1")
        if(regs.test(user.value)) {
            message.style.color = "greenyellow";
            message.innerHTML = "✔";
            return true;
        } else {
            message.style.color = "red";
            message.innerHTML = "请输入3-18位中英文用户名！";
            return false;
        }
    }
    // 登录的表单验证-密码
    function checkPassword() {
        let pass = document.getElementById("u-password-reg");
        let regs = /^[a-zA-Z0-9_]{3,12}$/;
        let message = document.getElementById("message2");
        if(regs.test(pass.value)) {
            message.style.color = "greenyellow";
            message.innerHTML = "✔";
            return true;
        } else {
            message.style.color = "red";
            message.innerHTML = "请输入3-12位中英文密码！";
            return false;
        }
    }

    function checkemail(){
        let pass = document.getElementById("u-checkemail-reg");
        let regs = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        let message = document.getElementById("message4");
        if(regs.test(pass.value)) {
            message.style.color = "greenyellow";
            message.innerHTML = "✔";
            return true;
        } else {
            message.style.color = "red";
            message.innerHTML = "请输入正确的邮箱格式！";
            return false;
        }
    }

    function checkCellPhone(){
        let pass = document.getElementById("u-cellphone-reg");
        let regs = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
        let message = document.getElementById("message3");
        if(regs.test(pass.value)) {
            message.style.color = "greenyellow";
            message.innerHTML = "✔";
            return true;
        } else {
            message.style.color = "red";
            message.innerHTML = "请输入11位手机号！";
            return false;
        }
    }
</script>



<style>
    body {
        align-items: center;
        /*display: flex;*/
        justify-content: center;
        height: 100%;

    }

    .form {
        border-radius: 20px;
        box-sizing: border-box;
        height: 560px;
        padding-top: 15px;
        margin-left: 700px;
        width: 320px;
    }

    .title {
        color:  #000;
        font-family: sans-serif;
        font-size: 36px;
        font-weight: 600;

    }

    .subtitle {
        color:  #000;
        font-family: sans-serif;
        font-size: 16px;
        font-weight: 600;
        margin-top: 10px;
    }

    .input-container {
        height: 50px;
        position: relative;
        width: 100%;
    }

    .ic1 {
        margin-top: 50px;
    }

    .ic2 {
        margin-top: 30px;
    }
    .input1{
        background-color:  #303245;
        border-radius: 12px;
        border: 0;
        box-sizing: border-box;
        color: #eee;
        font-size: 18px;
        height: 100%;
        outline: 0;
        padding: 4px 20px 0;
        width: 100%;
    }
    .input {
        background-color: #91ced4;
        border-radius: 12px;
        border: 0;
        box-sizing: border-box;
        color: #eee;
        font-size: 18px;
        height: 100%;
        outline: 0;
        padding: 4px 20px 0;
        width: 100%;
    }

    .cut {
        background-color: #15172b;
        border-radius: 10px;
        height: 20px;
        left: 20px;
        position: absolute;
        top: -20px;
        transform: translateY(0);
        transition: transform 200ms;
        width: 76px;
    }

    .cut-short {
        width: 50px;
    }

    .input:focus ~ .cut,
    .input:not(:placeholder-shown) ~ .cut {
        transform: translateY(8px);
    }

    .placeholder {
        color: #65657b;
        font-family: sans-serif;
        left: 20px;
        line-height: 14px;
        pointer-events: none;
        position: absolute;
        transform-origin: 0 50%;
        transition: transform 200ms, color 200ms;
        top: 20px;
    }

    .input:focus ~ .placeholder,
    .input:not(:placeholder-shown) ~ .placeholder {
        transform: translateY(-30px) translateX(10px) scale(0.75);
    }

    .input:not(:placeholder-shown) ~ .placeholder {
        color: #808097;
    }

    .input:focus ~ .placeholder {
        color: #dc2f55;
    }

    .submit {
        background-color: #08d;
        border-radius: 12px;
        border: 0;
        box-sizing: border-box;
        color: #eee;
        cursor: pointer;
        font-size: 18px;
        height: 50px;
        margin-top: 38px;
    // outline: 0;
        text-align: center;
        width: 100%;
    }

    .submit:active {
        background-color: #06b;
    }

</style>
</html>